<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		<style type="text/css">
			.examedLabel{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 7px;
				font-size: 2vw;
				color: white;
				background-color: #EF9A9A;
			}
			
			.examedItem{
				margin-left: 10px;
				margin-right: 10px;
				margin-top: 10px;
				border: 1px solid #bdbdbd;
				border-radius: 5px;
				background-color: white;
				display: flex;
				height: 16vw;
				align-items: center;
				justify-content: space-between;
			}
			.examedInfo{
				display: flex;
				flex-wrap: wrap;
				flex:1;
				margin-left: 20px;
				
			}
			.examedInfoItem{
				width: 50%;
				font-size: 3.5vw;
				color: #444444;
			}
			.answerCard{
				color: #EF9A9A;
				border: 1px solid #EF9A9A;
				padding: 4px;
				font-size: 3.5vw;
				border-radius: 3px;
				margin-right: 15px;
			}
        .operationName{
                margin:80px;
                padding: 8px;
                display:flex;
                font-size: 18px;
                align-items: center;
                justify-content: center;
                background-color: red;
                border-radius: 5px;
            }
		</style>
	<body style="background-color: #f8f8f8;">
		<div id="app">
			<div class="trainingTitle"><span ><img src="img/exam_icon.png" class="titeImage"></span>{{exam.examName}}</div>
			<div class="trainingInfo" > 开始时间：{{exam.startTime | formatTime}}</div>
			<div class="trainingInfo" > 结束时间：{{exam.endTime  | formatTime}}</div>
			<div class="trainingInfo" > 试卷题数：{{exam.total}}</div>
			<div class="trainingInfo" > 试卷总分：{{exam.totalScore}}</div>
			<div class="trainingInfo" > 考试时长：{{exam.examTime}}分钟</div>
            
            <div class="operationName" @click.stop="toOnlineExam">进入考试</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			 exam:{
				 
			 }
		  },
          filters:{
              formatTime(val){
                  if (val == null) {
                      return ""
                  }
                  return moment(val).format("YYYY-MM-DD HH:mm:ss")
              }
          },
		  created() {
              window.getExam =this.getExam
		  },
		  methods:{
              getExam(exam) {
                  this.exam = exam
              },
              toOnlineExam () {
                  let params = {
                      examId: this.exam.examId,
                      onlineExamUserId: this.exam.onlineExamUserId,
                      examTime: this.exam.examTime
                  }
                    WebViewJavascriptBridge.callHandler('toOnlineExam',params);
              }
		  }
		})		
		</script>
</html>
